<template>
	<div class="import-dialog-view">
		<div class="import-dialog">
			<div class="title">
				<p>アップロード</p>
				<i class="el-icon-close" @click="$emit('close')"></i>
			</div>
			<div class="import-dialog-body">
				<el-upload class="upload-demo" drag :action="action" :multiple="false" ref="upload"
					style="textalign: center" :on-error="uploadFalse" :on-success="uploadSuccess" :auto-upload="false"
					:before-upload="beforeAvatarUpload" :data="form" :file-list="fileList" :headers="token" :limit="1">
					<i class="el-icon-upload"></i>
					<div class="el-upload__text">
						ここにドラッグあるいはアップロード
						<!-- <em>{{ $t("message.homePageTable.finishedFile") }}</em>111 -->
					</div>
				</el-upload>
				<span slot="footer" class="dialog-footer">
					<el-button @click="onCancel" class="btn">
						{{ $t("message.public.cancel") }}
					</el-button>
					<el-button type="primary" class="btn" @click="submitUpload()">
						{{ $t("message.public.confirm") }}
					</el-button>
				</span>
			</div>
		</div>
	</div>
</template>

<script>

import BASE from "../../../utils/base";
import { getLocalStorage } from "../../../utils/storage";
import {
	GetFileId, uploadFileVerify
} from "@/api/api";
import eventBus from "@/eventBus/bus";

export default {
	name: "ImportDialog",
	props: ["title", "_api", "type"],
	data() {
		return {
			ImportOption: 1,
			Effective: false,
			form: {
				account: getLocalStorage("userName"),
				userID: getLocalStorage("userID"),
				PltCode: this.$store.state.pltCode,
			},
			fileList: [],
			action: BASE.IP + this._api,
			token: {
				Authorization:
					"Bearer " +
					(sessionStorage.token && getLocalStorage("token")
						? sessionStorage.token
						: ""),
			},
			state: false,
		};
	},
	components: {},
	watch: {},
	methods: {
		//文件上传失败触发
		uploadFalse(response, file, fileList) {

			this.$alert('システムエラーが発生しました。ご迷惑をお掛けして申し訳御座いません。システム管理者に問い合わせください。', '', {
				confirmButtonText: 'OK',
				type: 'warning',
			});

		},
		//文件上传成功触发
		async uploadSuccess(response, file, fileList) {
			// 关闭弹框
			console.log(response);
			this.fileList = [];
			if (response.code == 0) {
				// this.$message({
				// 	message: response.msg,
				// 	type: "success",
				// });
				if (this.type == 4) {
					eventBus.$emit('deviceGetTableRow', [response.data]);
				} else {
					this.$emit("getResponse", [response.data]);
				}
				this.fileList = [];
				this.$emit("close");
			} else if (response.code == 451) {
			} else if (response.code == -311) {

			} else if (response.code == -300) {

				this.$alert(response.msg, '', {
					confirmButtonText: 'OK',
					type: 'warning',
					callback: action => {
					}
				})
			} else if (response.code == 452) {
				this.$alert(response.msg, '', {
					confirmButtonText: 'OK',
					type: 'warning',
					callback: action => {
					}
				})
			} else {
				this.$alert(response.msg, '', {
					confirmButtonText: 'OK',
					type: 'warning',
				});

			}
			this.$emit("close");
		},
		waitFn() {
			return new Promise((resolve, reject) => {
				if (this.state) {
					resolve();
				} else {
					const intervalId = setInterval(() => {
						if (this.state) {
							clearInterval(intervalId);
							resolve();
						}
					}, 500);
				}
			});
		},
		// 上传前対文件的大小和类型的判断
		async beforeAvatarUpload(file) {

			if (this.type) {
				let D = {
					type: this.type,
					PltCode: this.$store.state.pltCode,
				};
				let R = await GetFileId(D);

				this.form.fileName = file.name;
				this.form.ParentID = R.data.data;

				let res = await uploadFileVerify(this.form);

				if (res.data.code == 451) {
					this.$confirm(res.data.msg, '', {
						confirmButtonText: 'OK',
						cancelButtonText: 'Cancel',
						type: 'warning'
					}).then(async () => {
						this.form.Cover = 1;
						this.state = true;
					}).catch(() => {
						this.$refs.upload.abort(); // 调用 cancel 方法取消上传  
						return false
					});
					this.state = false;
					await this.waitFn();
				}
			}

			console.log(file.size);
			if (file.size > 524288000) {
				this.$alert(this.$t('message.public.tip2'), '', {
					confirmButtonText: 'OK',
					type: 'warning',
				});
				return false;
			}
			return false;
		},
		//表单提交
		async submitUpload() {
			this.$refs.upload.submit();
		},
		//表单取消
		onCancel() {
			this.fileList = [];
			this.$emit("close");
		},
	},
	created() { },
	mounted() { },
	beforeDestroy() { },
	destroyed() { },
};
</script>
<style lang="scss" scoped>
.import-dialog-view {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;

	.import-dialog {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 488px;
		min-height: 393px;
		background: #ffffff;
		box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.05),
			0px 9px 28px 0px rgba(0, 0, 0, 0.08),
			0px 6px 16px -8px rgba(0, 0, 0, 0.15);

		.title {
			// width: 100%;
			height: 42px;
			border-bottom: 1px solid #f0f0f0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 24px;
			font-size: 16px;

			p {
				font-weight: bold;
				color: rgba(0, 0, 0, 0.85);
			}

			.el-icon-close {
				cursor: pointer;
			}
		}
	}

	.upload-demo {
		width: 360px;
		margin: 0 auto;
		margin-top: 24px;
	}

	.check-view {
		margin: 36px 24px 0 24px;
		height: 32px;
		padding: 0 18px;
		background: #f0f0f0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.check-view1 {
		margin: 36px 24px 0 24px;
		height: 32px;
		padding: 0 18px;
		background: #fff;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.dialog-footer {
		margin: 24px 0;
		display: flex;
		justify-content: center;
		align-items: center;

		button {
			width: 82px !important;
			height: 32px;
			// background: #ffffff;
			// border: 1px solid #d9d9d9;
			// cursor: pointer;
			line-height: 0;
		}

		button:nth-child(2) {
			margin-left: 16px;
			// color: #ffffff;
			// background: #106ebe;
		}

		::v-deep .el-button:hover,
		.el-button:focus {
			color: none;
		}
	}
}
</style>
